<template>
	<div class="">
		<div style="margin-top: 5px;">
			<el-row>
				<el-col :span="14">
					<el-card class="overview" :body-style="{ padding: '0px' }">
						<div class="tip" style="background-color:  #ECF5FF;">
							<span style="font-weight: 800;">迭代管理项目 <i class="el-icon-question"></i> </span>
						</div>
						<div>
							<div style="display: inline-block;width: 200px; height: 200px;">
								<el-scrollbar wrap-style="overflow-x:hidden;">
									<ul class="ul">
										<li class="line" v-for="item in Pname" @click="ck(item)" v-bind:class="[{active: pfname == item}]">
											<a style="font-size: 12px;" @click="checkItem(item)">{{ item }}</a>
											<a class="btn-view"><i style="font-size:14px;color:#00aaff ;padding: 0px;" class="icon iconfont icon-arrow"></i></a>
										</li>
									</ul>
								</el-scrollbar>
							</div>
							<div style="display: inline-block;vertical-align:top; margin-left: 20px;">
								<div style="width: 180px; text-align: center; display: inline-block;vertical-align:top;">
									<el-progress type="circle" :percentage="parseFloat(completeRate)"></el-progress>
									<el-row style="text-align: center;font-size: 12px; color: #c4c8d0;margin-top: 13px;">
										<el-col :span="8">
											<span style="display: inline-block;width: 7px;height: 7px;background: #ffffff;border-radius: 50%;border: 1px solid #ffffff;"></span>
											<p>预计</p>
											<p>{{allHours}}小时</p>
										</el-col>
										<el-col :span="8">
											<span style="display: inline-block;width: 7px;height: 7px;background:  #20a0ff;border-radius: 50%;border: 1px solid #20a0ff;"></span>
											<p>完成</p>
											<p>{{completeHours}}小时</p>
										</el-col>
										<el-col :span="8">
											<span style="display: inline-block;width: 7px;height: 7px;background: #e5e9f2;border-radius: 50%;border: 1px solid #e5e9f2;"></span>
											<p>剩余</p>
											<p>{{leftHours}}小时</p>
										</el-col>
									</el-row>
								</div>
								<div style="display: inline-block;width:200px; padding-top: 20px; margin-left: 80px;">
									<p style="font-size: 12px;color: #838a9d;"><i class="el-icon-circle-check" style="color: lawngreen;"></i>
										昨日完成任务数<strong>{{yesterdayCompleteTask}}</strong> </p>
									<el-progress :percentage="yesterdayCompletionRate"></el-progress>
									<p style="font-size: 12px;color: #838a9d; margin-top: 30px;"><i class="el-icon-circle-check" style="color: lawngreen;"></i>
										昨日完成任务数<strong>{{todayCompleteTask}}</strong> </p>
									<el-progress :percentage="todayCompletionRate"></el-progress>
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="9" style="margin-left: 40px;">
					<div class="right">
						<div>
							<el-card>
								<div class="tip" style="background-color:  #ECF5FF;">
									<span style="font-weight: 800;">迭代总览</span>
								</div>
								<div id="echarts" class="pdiagnosis" style="margin-left:6px ;width: 450px;height: 200px;"></div>
							</el-card>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="14">
					<el-card style="margin-top: 20px;">
						<div class="tip" style="background-color:  #ECF5FF;">
							<span style="font-weight: 800;">全部总览</span>
						</div>
						<div id="echarts3" style=" width: 720px;height: 200px;"></div>
					</el-card>
				</el-col>
				<el-col :span="9" style="margin-left: 40px; ">
					<el-card>
						<div class="tip" style="background-color:  #ECF5FF;">
							<span style="font-weight: 800;">指派给我</span>
						</div>
						<div>
							<el-table :data="tableData" style="width: 100% ;"  :height="280" :default-sort="{prop: 'date', order: 'descending'}">
								<el-table-column prop="id" label="ID" sortable width="180">
								</el-table-column>
								<el-table-column prop="name" label="任务名称" sortable width="180">
								</el-table-column>
								<el-table-column label="状态" >
									<template slot-scope="scope">
										<span v-if="scope.row.status==0"><span style="color: #00AAFF;">未开始</span></span>
										<span v-else-if="scope.row.status==1"><span style="color: #AF5B5E;">进行中</span></span>
										<span v-else-if="scope.row.status==2"><span style="color: #AF5B5E;">已暂停</span></span>
										<span v-else-if="scope.row.status==3"><span style="color: #AF5B5E;">已完成</span></span>
										<span v-else-if="scope.row.status==4"><span style="color: #AF5B5E;">已取消</span></span>
										<span v-else><span style="color: #AF5B5E;">已关闭</span> </span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import axios from '@/utils/axiosutils.js';
	export default {
		name: 'intelligentReport',
		data() {
			return {
				Pname: [],
				pfname: '',
				allHours:'',
				completeHours:'',
				leftHours:'',
				completeRate:0,
				yesterdayCompleteTask:'',
				yesterdayCompletionRate:0,
				todayCompleteTask:''	,
				todayCompletionRate:0	,
				tableData: [],
				iterationChartData:[],
				allIterationChartData:[]
			};
		},
		components: {},
		created() {
			this.init()
		},
		methods: {
			init() {
				axios.post("/project/myProjects", resp => {
					this.Pname = resp.obj.names;
					if (resp.obj.names != null) {
						this.pfname = resp.obj.names[0];
					}
				});
				this.checkItem(null);
				this.iterationChart();
				this.allIterationChart();
				this.assign();
			},
			// 指派
			assign(){
				axios.post("/task/assign", resp => {
					this.tableData=resp.obj
				});
			},
			
			/*项目总览*/
			ck(item) {
				this.pfname = item
			},
			checkItem(item) {
				axios.get("project/projectTime", resp => {
					this.allHours = resp.obj.allHours;
					this.completeHours = resp.obj.completeHours;
					this.leftHours = resp.obj.leftHours;
					this.completeRate = resp.obj.completeRate;
					this.yesterdayCompleteTask = resp.obj.yesterdayCompleteTask;
					this.yesterdayCompletionRate = resp.obj.yesterdayCompletionRate;
					this.todayCompleteTask = resp.obj.todayCompleteTask;
					this.todayCompletionRate = resp.obj.todayCompletionRate;
					
					
				}, {
					projectName: item
				});
			},
			// 迭代总览
			iterationChart(){
				axios.post("project/projectIteration", resp => {
					this.iterationChartData = resp.obj;
					this.drawPie()
				}, {
					projectName: this.Pname
				});
			},
			drawPie() {
				var charts = this.$echarts.init(document.getElementById('echarts'))
				var data = this.iterationChartData;
				
				var mydate = [];

					mydate= {
						name: data.name,
						type: 'bar',
						barWidth: '60%',
						data: data.value
					};

				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true,
					},
					toolbox: {
						feature: {
							saveAsImage: {},
							magicType: {                            //动态类型切换
							  show: true,
							  title:"切换",                       //各个类型的标题文本，可以分别配置。
							  type: ['line', 'bar'],              //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
							},
						}
					},
					grid: {
						left: '3%',
						right: '2%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['2021-1-1', '2021-2-1', '2021-3-1', '2021-4-1', '2021-5-1', '2021-6-1', '2021-7-1', '2021-8-1',
							'2021-9-1', '2021-10-1', '2021-11-1', '2021-12-1'
						].map((str)=>{
							return str.replace(' ','\n')
						}),
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: mydate
				}
				charts.setOption(option);
			},
			allIterationChart(){
				axios.post("project/allIterationChart", resp => {
					this.allIterationChartData = resp.obj;
					this.drawPie3()
				}, {
					projectName: this.Pname
				});
			},
			drawPie3() {
				var charts = this.$echarts.init(document.getElementById('echarts3'))
				var data = this.allIterationChartData;
				var names = [];
				var mydate = [];
				for (var i = 0; i < data.length; i++) {
					names.push(data[i].name);
					mydate[i] = {
						name: data[i].name,
						type: 'line',
						data: data[i].value,
					};
					
				}
				var option = {
					title: {
						text: '全部总览'
					},
					tooltip: {
						trigger: 'axis',
						confine: true,
					},
					legend: {
						data: names
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {},
							magicType: {                            //动态类型切换
							  show: true,
							  title:"切换",                       //各个类型的标题文本，可以分别配置。
							  type: ['line', 'bar'],              //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
							},
							restore : {                             //配置项还原。
							  show: true,                         //是否显示该工具。
							  title:"还原",
							},
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2021-1-1', '2021-2-1', '2021-3-1', '2021-4-1', '2021-5-1', '2021-6-1', '2021-7-1', '2021-8-1',
							'2021-9-1', '2021-10-1', '2021-11-1', '2021-12-1'
						].map((str)=>{
							return str.replace(' ','\n')
						}),
					},
					yAxis: {
						type: 'value'
					},
					series: mydate
				};
				charts.setOption(option);
			}
		},
		mounted() {
			this.$nextTick(function() {
				this.drawPie('echarts')
				this.drawPie3('echarts3')
			})
		}
	}
</script>
<style scoped>
	/* 迭代统计 */
	.overview {
		padding: 10px !important;
	}

	.ul {
		display: block;
		list-style-type: none;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 0px;
	}

	.ul li.active {
		color: black;

		/* 列表选中时箭头也显示出来 */
		.btn-view {
			opacity: 1;
			display: inline-block;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 0px;
			width: 26px;
			text-align: right;
			float: right;
		}
	}

	/* 项目列表 */
	.el-scrollbar {
		width: 100%;
		/* 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区 */
		height: 100%;
		/*   必须设置el-scrollbar的高度 */
		overflow-x: hidden;
	}

	.btn-view {
		/* position: absolute; */
		display: inline-block;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 0px;
		width: 26px;
		text-align: right;
		opacity: 0;
		float: right;
	}

	.btn-view:hover {
		opacity: 1;
		background-color: #bfbfbf;
	}

	.line {
		color: #cecece;
	}

	.line:hover {
		background-color: #d6d6d6;
		cursor: pointer;
		color: #040404;
	}

	.tip {
		border-left: 5px solid #50bfff;
		padding: 5px 15px;
		border-radius: 4px;
		margin: 0px 0;
		color: #409EFF;
	}

	>>>.el-card__body {
		padding: 5px;
	}

	.severe {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #ff0000;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.moderate {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #e0861a;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.mild {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #33a3dc;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.normal {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #45b97c;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.severeColor {
		color: #ff0000;
	}

	.moderateColor {
		color: #e0861a;
	}

	.mildColor {
		color: #33a3dc;
	}

	.normalColor {
		color: #45b97c;
	}

	.pdiagnosis {
		display: inline-block;
		vertical-align: middle;
	}

	.pul li {
		padding-bottom: 4px;
	}
	
	
	
	
	
	.el-table__body-wrapper {
	overflow-y: scroll !important;
	
	}
</style>
